import React, { Component } from 'react'
import styles from './TabVertical.module.scss'

export default class Tab extends Component {
  constructor(props) {
    super(props)
    this.state = {
      select: 0
    }
  }

  onTab(item, index) {
   this.props.onTab(item, index)
  }

  static getDerivedStateFromProps(nextProps) {
    const { selected } = nextProps
    return {
      select: selected
    }
  }

  componentWillReceiveProps(nextProps) {
    const { selected } = nextProps
    this.setState({
      select: selected
    })
  }

  render() {
    const { select } = this.state 
    const { tabs } = this.props
    return (
      <div className={styles.tab_container}>
        <ul>
          {tabs && tabs.map((item, index) => {
            return (
              <li key={index} style={select === index ? {background: '#b0200c', color: 'white', fontSize: 20} : {}} 
                onClick={() => this.onTab(item, index)}>
                {item.name || ''}
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}
